<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见问题库管理系统v1.0</title>
</head>
<body>
    <div id="wrap">
        <h1>常见问题检索</h1>
        <table>
            <tr>
                <th>分类：</th>
                <td id="cname"></td>
            </tr>
            <tr>
                <th>创建时间：</th>
                <td id="createDate"></td>
            </tr>
            <tr>
                <th>标题：</th>
                <td id="title"></td>
            </tr>
            <tr>
                <th>内容：</th>
                <td>
                    <textarea id="content" rows="10" cols="40"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="返回" id="back">
                </td>
            </tr>
        </table>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        
        $(function () {
            let id = getUrlParam('id');

            loadData(id);


            $('#back').click(function () {
                window.location.href = 'index.html';
            });
        });


        function loadData(id) {
            let baseUrl = "http://localhost:8081/api/faq";
            $.ajax({
                type:'get',
                url:baseUrl + '/details/'+id,
                data:{},
                dataType:'json',
                success:function (result) {
                    console.log(result);
                    $('#cname').html(result.data.clazz.cname);
                    $('#title').html(result.data.title);
                    $('#createDate').html(result.data.createDate);
                    $('#content').html(result.data.content);

                }
            });
        }
    </script>
</body>
</html>